<template>
    <view class="box">
        <!-- #ifndef H5 -->
        <uni-nav-bar dark fixed backgroundStyle="#ffffff" color="#121317" status-bar>
            <template slot="left">
                <uni-icons type="arrow-left" @click="newReturnPagesApplication()" color="#121317" size="24"></uni-icons>
            </template>
            <template>
                <view class="nav_title">{{ navTitle }}</view>
            </template>
            <!-- #ifndef MP -->
            <template slot="right">
                <view class="title-right" @click.stop="_shareOpen">
                    <text class="iconfont icon-a-Frame1076" style="color: #007aff; font-size: 32rpx"></text>
                    <text class="text">分享</text>
                </view>
            </template>
            <!-- #endif -->
        </uni-nav-bar>
        <!-- #endif -->

        <!-- 搜索 -->
        <view class="searchBox">
            <view class="app_nav_title nav_input">
                <view class="iconfont icon-a-Frame1073"></view>
                <input @input="getSearchList()" v-model="searchVal" :focus="focus" placeholder-class="input-placeholder"
                    type="text" :placeholder="getSearchPlaceHolder()" class="search_input" />
                <view class="closeBox" @click.stop="clearInfo();">
                    <uni-icons class="uniIconClear" type="clear" style="color:rgba(35,42,53,0.3)" size="20"></uni-icons>
                </view>
            </view>
            <view class="cancel" @click.stop="newReturnPagesApplication(2)">取消</view>
        </view>

        <view class="content_box" :style="{ height: `calc( 100vh - ${navBarHeight}px - 84rpx - 28rpx )` }">
            <template v-if="list && list.length">
                <view class="itemBox">
                    <view class="item" @click.stop="jumpDataDetail(item)" v-for="(item, index) in list" :key="index">
                        <!-- 要区分统考和校考的显示 -->
                        <template v-if="checkType && checkType == 2">
                            <view class="attrBox">
                                <view class="attr">{{ item.major_attr || '--' }}</view>
                                <view class="major_name">{{ item.major_real_name }} <text v-if="item.major_type&&item.major_attr!=item.major_type">（{{ item.major_type }}）</text> </view>
                            </view>
                        </template>
                        <template v-else-if="item.university_school_type">
                            <view class="type"
                            :class="[getTypeStyle(item.university_school_type)]">
                                {{ item.university_school_type }}
                            </view>
                            {{ showLabel(item) }}
                        </template>
                        <template v-else>
                            {{ showLabel(item) }}
                        </template>
                    </view>
                </view>
            </template>
            <view v-else-if="isShowDefault" class="default_text">没找到符合的内容</view>
        </view>
    </view>
</template>
<script>
export default {
    data() {
        return {
            navTitle: '',
            focus: false,
            isShowDefault: false,
            list: [],
            searchVal: '',
            searchDataInfo: {},
            checkType: '', // 1 统考  2校考
            timeout: null,
        }
    },
    computed: {
        // 导航条高度
        navBarHeight() {
            let that = this;
            let navHeight = 0;
            let navigationBarHeight = 0;
            // #ifndef H5
            // 状态栏高度
            let info = uni.getSystemInfoSync();
            let statusBarHeight = info.statusBarHeight + info.safeAreaInsets.top || 0;
            // #ifdef MP

            // 获取微信胶囊的位置信息 width,height,top,right,left,bottom
            const custom = uni.getMenuButtonBoundingClientRect();
            // 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
            navigationBarHeight = custom.height + (custom.top - statusBarHeight) * 2;
            // #endif

            // 总体高度 = 状态栏高度 + 导航栏高度
            navHeight = navigationBarHeight + statusBarHeight;
            // #endif
            return navHeight;
        }
    },
    methods: {
        getTypeStyle(type) {
            let that = this;
            let _class = that.schoolType[type];
            return _class || '';
        },
        showLabel(obj) {
            let that = this;
            let searchPageInfo = that.searchDataInfo.searchPageInfo;
            return obj[searchPageInfo.search_data];
        },
        clearInfo() {
            let that = this;
            that.searchVal = '';
            that.list = [];
            that.isShowDefault = false;
        },
        getSearchList() {
            let that = this;
            let searchVal = that.searchVal.trim();
            if (!searchVal) {
                that.list = [];
                that.isShowDefault = false;
                return;
            }
            let searchPageInfo = that.searchDataInfo.searchPageInfo;
            if (that.timeout) {
                clearTimeout(that.timeout);
                that.timeout = null;
            }
            that.timeout = setTimeout(async () => {
                if (!that.searchVal) return;
                let { code, data } = await that.$application_api[searchPageInfo.api]({ [searchPageInfo.search_data]: that.searchVal });
                that.list = data || [];
                if (!data || !data.length) {
                    that.isShowDefault = true;
                }
                clearTimeout(that.timeout);
                that.timeout = null;
            }, 500)
        },
        jumpDataDetail(checkInfo) {
            let that = this;
            let jump_data = that.searchDataInfo.jump_data;
            if (!jump_data.url) return;
            if(that.checkType && that.checkType == 2){
                checkInfo.major_name = checkInfo.major_real_name || checkInfo.major_name;
            }
            let obj = Object.assign({}, that.searchDataInfo, { checkInfo: checkInfo })
            uni.setStorageSync('searchDataInfo', obj);
            that.applicationRewritingRedirectTo({
                url: jump_data.url
            });
        },
        getSearchPlaceHolder() {
            let that = this;
            let placeholder = '';
            if (that.searchDataInfo && that.searchDataInfo.searchPageInfo) {
                placeholder = that.searchDataInfo.searchPageInfo.placeholder
            }
            return placeholder;
        },
        getNavTitle() {
            let that = this;
            let title = '';
            if (that.searchDataInfo && that.searchDataInfo.searchPageInfo) {
                title = that.searchDataInfo.searchPageInfo.searchPageTitle || ''
            }
            // #ifdef H5
            uni.setNavigationBarTitle({
                title: title,
                success: function () { },
                fail: function (err) { }
            });
            // #endif
            return title;
        }
    },
    onLoad() {
        let that = this;
        that.searchDataInfo = uni.getStorageSync('searchDataInfo') || {};
        that.navTitle = that.getNavTitle();
        
        let checkInfo = that.searchDataInfo.checkInfo || {};
        let searchPageInfo = that.searchDataInfo.searchPageInfo || {};
        let search_data = searchPageInfo.search_data || {};
        if(searchPageInfo.checkType){
            that.checkType = that.searchDataInfo.provinceInfo[searchPageInfo.checkType] || '';
        }
        if (checkInfo[search_data]) {
            that.searchVal = checkInfo[search_data];
            if(that.searchVal){
                that.getSearchList();
            }
        }
    },
    onShow() {
        let that = this;
        setTimeout(() => {
            that.focus = true;
        }, 300)
    },
    onUnload() {
        let that = this;
        that.focus = false;
        if (that.timeout) {
            clearTimeout(that.timeout);
            that.timeout = null;
        }
    }
};
</script>

<style lang="scss" scoped>
.searchBox {
    width: 100vw;
    height: calc(84rpx + 28rpx);
    padding: 0 38rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-start;

    .cancel {
        margin-top: 22rpx;
        width: max-content;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-shrink: 0;
        margin-left: 30rpx;
        font-weight: 500;
        font-size: $font-size-D;
        color: $font-color-light;

    }

    .closeBox {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
}

.content_box {
    width: 100vw;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 30rpx 40rpx;
    box-sizing: border-box;

    .itemBox {
        width: 100%;
        height: 100%;
        overflow-y: auto;

        .item {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            padding: 32rpx 0;
            box-sizing: border-box;
            border-bottom: 2rpx solid #F9FAFC;
            font-weight: 700;
            font-size: $font-size-F;
            color: $font-color-main-A;

            .attrBox{
                width: 100%;
                .major_name{
                    font-size: $font-size-E;
                    font-weight: normal;
                    color: $font-color-main-A;
                    margin-top: 6rpx;
                }
            }

            .type {
                font-weight: normal;
                flex-shrink: 0;
                width: max-content;
                padding: 10rpx 14rpx;
                box-sizing: border-box;
                border-radius: 6rpx;
                margin-right: 13rpx;
                font-size: $font-size-E;
            }
        }
    }

}

.default_text{
	font-size: $font-size-C;
	color: $font-color-main-A;
	font-weight: bold;
	text-align: center;
	margin-top: 60rpx;
    width: 100%;
}
</style>
